<template>
	<view class="guideList" :style="operStatus&&powerRemove==false?'margin-bottom:260rpx':'margin-bottom:162rpx'">
		<navBar isBack backColor="#000000" :title="addType?'添加商品':'生成清单'" color="#000000" background="#fff"></navBar>
		<view class="gL_topNum" v-if="!forwardOffer">共{{allNum}}件家具<span @click="_toManage">{{powerRemove?'完成':'管理'}}</span></view>
		<view class="gL_topNum" v-else>
			<view class="comeWhere">
				<image src="https://manager.ryz1620.com/static/distri/distriMoney/123.png" mode=""></image>
				<view class="comeWhereInfo">来自<span>*张三</span>的订单</view>
			</view>
			<view class="">
				共6件家具
			</view>
		</view>

		<!-- 店铺商品列表 -->
		<view class="gL_shopList" v-for="(item,index) in shopList" :key="index">
			<view class="gL_shopRoom">
				<view class="gL_roomTit">
					<checkbox-group @change="_shopRoomAllCheck(index)">
						<checkbox :checked="item.checked"></checkbox>
					</checkbox-group>
					<view class="gL_roomImg">
						<image :src="item.store_logo" mode=""></image>
					</view>

					<view class="gL_roomInfo">{{item.store_name}}
						<p>{{item.roomAddress}}</p>
					</view>
				</view>
				<view class="gL_goRoomInfo">
					<view class="gL_goRoom" @click="_toShopRoom(item.store_id)">进店</view>
					<view class="gL_goRoom roomMap">
						<view class="iconfont icon-tubiaozhizuomoban1"></view>
					</view>
				</view>

			</view>
			<!-- 商品列表 -->
			<view class="gL_allShopList" v-for="(item1,index1) in item.medical_list" :key="index1">
				<view class="gL_allShopItem">
					<view class="gL_allItemTop">
						<checkbox-group @change="_shopCheck(index,index1)">
							<checkbox :checked="item1.checked" :disabled="!item1.sku_id"></checkbox>
						</checkbox-group>
						<view class="gL_shopImg" @click="_toGuideDetail(item1.product_id)">
							<image :src="item1.main_imgurl" mode=""></image>
							<view class="gL_shop5D" @click.stop="_toFiveD">
								<view class="gL_5Dicon iconfont icon-tubiaozhizuomoban"></view>
								5D
							</view>
						</view>
						<view class="gL_shopInfo">
							<view class="gL_title omit-1" @click="_toGuideDetail(item1.product_id)">{{item1.product_title}}</view>
							<view class="gL_spec" @click="_choiceSpec(item1)">
								<view v-if="!item1.sku_id" style="font-size: 20rpx;">当前规格已下架，请重新选择</view>
								<view v-else>
									<view class="specList omit-1" v-if="!item1.attribute[0].attr_name"><span v-for="(i,v) in item1.attribute">{{i.value+' / '}}</span></view>
									<view class="specList omit-1" v-else><span v-for="(i,v) in item1.attribute">{{i.attr_name+':'+i.attr_value+'; '}}</span></view>
								</view>
								<view class="iconfont icon-arrow-left-copy"></view>
							</view>
							<span class="price">￥{{item1.price}}</span>
						</view>
					</view>
					<view class="gL_allItemBottom">
						<view class="gL_minus" @click="_downNum(item1)"></view>
						<view class="gL_ShopNum">{{item1.cart_num}}</view>
						<view class="gL_add" @click="_addNum(item1)"></view>
					</view>
				</view>
				<view class="gL_border" v-if="index1+1 !== item.child.length"></view>
			</view>
		</view>

		<!-- 规格弹框 -->
		<view class="gL_specShadow" v-if="specShadow">
			<view class="gL_specInfo">
				<view class="gL_specInfoTop">
					<view class="spec_shop">
						<image :src="specList.main_imgurl" mode=""></image>
						<view class="spec_shopInfo">
							<span>¥{{specList.price}}</span>
							<p>编号：1000320203</p>
						</view>
						<view class="spec_close" @click="_specClose">×</view>
					</view>
					<!-- 规格循环↓ -->
					<view class="spec_option" v-for="(item,index) in specList.parameter" :key="index">
						<view class="spec_title">{{item.specifs}}</view>
						<view class="spec_item">
							<span v-for="(item1,index1) in item.child" :key="index1" @click="_clicSpec(item1,index)" :class="{specActive:item1.checked}">{{item1.specif}}</span>
						</view>
					</view>

					<!-- 数量 -->
					<!-- <view class="spec_shopNum">
						数量
						<view class="shopNum_oper">
							<span>-</span>
							<span class="shopNum">1</span>
							<span>+</span>
						</view>
					</view> -->

					<!-- 加入清单按钮 -->
					<view class="spec_joinBtn" @click="toChangeSpec">确定</view>
				</view>
			</view>
		</view>

		<view v-if="!powerRemove">

			<!-- 全选与优惠（未操作） -->
			<view class="gL_allCheck" v-if="!operStatus">
				<view class="gL_allCheckBtn">
					<view class="gL_allLeft">
						<checkbox-group @change="_lastAllCheck">
							<label>
								<checkbox :checked="lastAllChecked" /><text>全选</text>
							</label>
						</checkbox-group>
						<span>合计：¥ {{allPrice}}</span>
					</view>
					<view class="gL_allRight" @click="_generList">
						<!-- <view v-if="generList" class="iconfont icon-youhuiyingxiao"></view> -->
						{{addType?'添加商品':'生成清单'}}
					</view>
				</view>
			</view>
		</view>

		<!-- 管理 一键删除 -->
		<view class="gL_allCheck" v-else>
			<view class="gL_allCheckBtn">
				<view class="gL_allLeft">
					<checkbox-group @change="_lastAllCheck">
						<label>
							<checkbox :checked="lastAllChecked" /><text>全选</text>
						</label>
					</checkbox-group>
				</view>
				<view class="gL_allRight gL_allRemove" @click="_toRemove">
					删除
				</view>
			</view>
		</view>
		
		<!-- /遮罩是否确认删除 -->
		<view class="mE_btnShadow" v-if="openDel">
			<view class="mE_btnContent">
				<h2>温馨提示</h2>
				<!-- <h3 v-if='storeNum.length>1'>「{{storeNum[storeNum.length-1]}}」的商品不可与其他商品一起选择，请分开下单！</h3> -->
				<h3>确定要删除这些商品吗!</h3>
				<view class="mE_btn">
					<view @click="_cancelFn">取消</view>
					<view @click="_deterFn" class="mE_btn2">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_mall from '@/service/mall.js'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				// 商品列表
				shopList: [],


				//二维码图片
				QRimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.haote.com%2Fupload%2Fqrcode%2F1681%2Fhaote55ae1a926727f10263326a5ceb1d5da8.png&refer=http%3A%2F%2Fimg.haote.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614740414&t=e50f40ca8358c646cd800f54a0400933',
				
				delItem:[],  //要删除的商品
				openDel:false,  //删除弹框
				
				storeNum:[], //店铺数量
				
				lastAllChecked: false, //最终的全选按钮
				operStatus: false, //全选与优惠是否操作

				specShadow: false, //规格弹框
				powerRemove: false, //管理按钮
				generList:false,  //是否生成清单
				

				changePrice: '', //优惠价格
				keys:[],
				specIndex: 0,
				specIndex1: 0,
				IphoneBottom: 0,
				addType:false, //guideList点击进来的添加状态
				single_id:null,//guideList点击进来的single_id
				
				specList: [], // 规格列表
				sku_id:null, //
				id:null,//清单列表id
				nowNum:null,
				store_id:null, //清单中添加商品时传过来的店铺id
			}
		},
		
		onLoad(options) {
			this.getGuideList();
			// this.get_guideRole()
			console.log(options)
			this.addType = options.addType=="true"?true:false
			this.single_id = options.single_id
			this.store_id = options.storeId
			
		},
		onShow() {
			this.getGuideList()
		},
		computed:{
			// 合计
			allPrice(){
				let allPrice = 0
				this.shopList.map(item=>{
					item.medical_list.map(item1=>{
						if(item1.checked){
							allPrice += Number(item1.price) * item1.cart_num.toFixed(2);
						}
					})
				})
				return allPrice
			},
			// 共几件商品
			allNum(){
				let allNum = 0;
				this.shopList.map(item=>{
					item.medical_list.map(item1=>{
						allNum += item1.cart_num
					})
				})
				return allNum
			}
		},
		methods: {
			// 获取清单列表
			getGuideList(){
				let user_id = this.$store.state.index.userId;
				service_mall.goods_getlist({user_id}).then(res=>{
					console.log(res)
					if(res.code==1){
						res.data.list.map(item=>{
							item.checked = false;
							item.medical_list.map(item1=>{
								item1.checked = false
							})
						})
						this.shopList = res.data.list?res.data.list:[];
					}
				})
			},
			
			// 获取商品详情
			getShopDetail(product_id){
				service_mall.goods_getDetail({product_id}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.specList = res.data
					}
				})
			},
			
			
			// 点击列表中的商品规格
			_choiceSpec(item){
				this.specShadow = true
				this.id = item.id
				this.specShopImg = item.main_imgurl
				this.getShopDetail(item.product_id)
				
			},
			
			// 点击规格中的选项
			_clicSpec(data,index1) {
				if(data.checked){
					this.$set(data,"checked",false)
				}else{
					this.specList.parameter[index1].child.map(item=>{
						this.$set(item,"checked",false)
					})
					this.$set(data,"checked",true)
					this.get_keys()
				}
			},
			get_keys(){
				let keys = [];
				this.specList.parameter.map((item1,index1)=>{
					let checkedItem = item1.child.find(r=>r.checked)
					if(checkedItem){
						keys.push({
							key:item1.specifs,
							value:checkedItem.specif
						})
					}
				})
				this.keys = keys
				let sku_lst = this.specList.sku_lst
				for(let i = 0;i<sku_lst.length; i++){
						if(JSON.stringify(sku_lst[i].attribute) == JSON.stringify(keys)){
							this.sku_id= sku_lst[i].sku_id
							this.specList.price = sku_lst[i].price
							this.specList.primary_price = sku_lst[i].primary_price
							this.specList.stockNum = sku_lst[i].num
						}
				}	
				console.log(this.sku_id)
			},
			
			// 更改规格
			toChangeSpec(){
				if(this.specList.specs_type == 1 && this.specList.sku_lst.length>0){//单
					this.sku_id = this.specList.sku_lst[0].sku_id
				}
				if(this.specList.specs_type == 2 && !this.sku_id){
					uni.showToast({
					    title: '请选择规格',
						icon: 'none',
					    duration: 2000
					});
					return
				}
				
					console.log(this.sku_id)
					console.log(this.specList)
				console.log(this.id)
				service_mall.changeGenerSpec({sku_id:this.sku_id,id:this.id}).then(res=>{
					if(res.code==1){
						this.getGuideList()
						this.specShadow = false
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			
			// 获取商家导购身份
			// get_guideRole(){
			// 	let user_id = this.$store.state.index.userId;
			// 	service_mall.get_guideRole({user_id}).then(res=>{
			// 		console.log(res)
			// 		if(res.code==1){
			// 			this.root = res.data.type==0?false:true;
			// 		}
			// 	})
			// },
			
			//点击进入店铺
			_toShopRoom(store_id) {
				uni.navigateTo({
					url: `/pages/mall/store/store?storeId=${store_id}`
				})
			},

			_getStytemInfo() {
				let isIphoneX = App.globalData.isIphoneX;
				if (isIphoneX) {
					this.IphoneBottom = 68
				}
			},

			//点击管理按钮
			_toManage() {
				if (this.powerRemove) {
					this.powerRemove = false
				} else {
					this.powerRemove = true
				}
			},

			//点击单个商品进入商品详情
			_toGuideDetail(product_id) {
				uni.navigateTo({
					url: `/pages/mall/goods/goods?id=${product_id}`
				})
			},

			//点击生成清单 或者 添加商品
			_generList() {
				this.generList = true
				if(this.generList){
					let storeArr = []
					let cartId = []
					// 获取选择商品的店铺
					this.shopList.map(item=>{
						item.medical_list.map(item1=>{
							if(item1.checked == true){
								storeArr.push(item.store_name)
								cartId.push(item1.id)
							}
						})
					})
					let store_arr = [...new Set(storeArr)]
					let cart_ids = [...new Set(cartId)].join(',')
					this.storeNum = store_arr;
					// this.cart_ids = cart_ids;
					if(this.storeNum.length){ //判断是否选择
						// if(this.storeNum.length>1){
							// return this.openDel = true
						// }else{
							if(!this.addType){
								// 生成清单
								service_mall.toGenerList({cart_ids}).then(res=>{
									console.log(res)
									if(res.code==1){
										console.log(res)
										this.getGuideList();
										let single_id = res.data.single_id
										uni.navigateTo({
											url:`../guideList/guideList?single_id=${single_id}`
										})
									}else{
										uni.showToast({
											title:res.msg,
											icon:"none"
										})
									}
								})
							}else{
								// 添加商品
								
								// if()
								service_mall.addShop({cart_ids,single_id:this.single_id}).then(res=>{
									console.log(res)
									if(res.code==1){
										console.log(res)
										this.getGuideList();
										uni.navigateTo({
											url:`../guideList/guideList?single_id=${this.single_id}`
										})
									}else{
										uni.showToast({
											title:res.msg,
											icon:"none"
										})
									}
								})
							}
						// }
					}else{
						uni.showToast({title:'请选择商品',icon:'none'})
					}
				}
			},
			
			// 点击添加商品
			_toAddShop(){
				
			},
			
			// 规格弹框小x
			_specClose(){
				this.specShadow = false
			},

			//点击x
			_closeShadow() {
				// this.openShadow = false
			},
			
			// 点击弹出框的确定
			_deterFn(){
				if(this.generList){
					this.openDel = false
				}else{
					let id = this.delItem.join(',')
					console.log(id)
					let user_id = this.$store.state.index.userId;
					service_mall.goods_del({id:id}).then(res=>{
						console.log(res)
						if(res.code==1){
							this.getGuideList()
							uni.showToast({title:'删除成功',icon:'success'})
							this.openDel = false
						}else{uni.showToast({title:res.msg,icon:'none'})}
					})
				}
			},
			
			// 点击弹出框的取消
			_cancelFn(){
				this.openDel = false
				
			},
			
			// 管理删除按钮
			_toRemove(){
				this.generList = false
				this.storeNum=[]
				let arr = []
				 this.shopList.map(item=>{
					 let k = item.medical_list.find(item1=>{
						if(item1.checked==true){
							arr.push(item1.id)
						}
					})
				})
				console.log(arr)
				this.delItem = arr
				if(arr.length){
						this.openDel = true
					}else{
					uni.showToast({
						title:'请勾选要删除的项',
						icon:'none'
					})
				}
			},

			//点击店铺内的全选
			_shopRoomAllCheck(index) {
				if (this.shopList[index].checked) {
					this.shopList[index].checked = false
				} else {
					this.shopList[index].checked = true
				}
				console.log(this.shopList[index].checked)
				this.shopList[index].medical_list.map(item => item.checked = this.shopList[index].checked)
				this._seeCheck()
			},

			//点击商品的单个选中
			_shopCheck(index, index1) {
				console.log(index,index1)
				if (this.shopList[index].medical_list[index1].checked) {
					this.shopList[index].medical_list[index1].checked = false
				} else {
					this.shopList[index].medical_list[index1].checked = true
				}
				console.log(this.shopList[index].medical_list[index1].checked)
				//每点击一次单个都看一遍所有的checked
				let shopCheck = this.shopList[index].medical_list.every(item => item.checked)
				console.log(shopCheck)
				this.shopList[index].checked = shopCheck
				console.log(this.shopList[index].checked)
				this._seeCheck()
			},

			//最终的全选按钮
			_lastAllCheck() {
				if (this.lastAllChecked) {
					this.lastAllChecked = false
				} else {
					this.lastAllChecked = true
				}
				this.shopList.map(item => {
					item.checked = this.lastAllChecked;
					item.medical_list.map(item1 => {
						item1.checked = this.lastAllChecked
					})
				})
			},

			//每次点一个都看一遍所有的checked状态
			_seeCheck() {
				this.shopList.every(item => this.lastAllChecked = item.checked)
			},

			//点击减号
			_downNum(item) {
				if(!item.sku_id){
					uni.showToast({
						title:'当前规格已下架，请重新选择',
						icon:'none'
					})
					return
				}
				if(item.cart_num>1){
					service_mall.goods_setDec({
						id:item.id,
						num:1
					}).then(res=>{
						if(res.code==1){
							this.getGuideList()
						}
					})
				}else{
					uni.showModal({
					    title: '提示',
					    content: '确认删除该商品?',
					    success:  (res) => {
					        if (res.confirm) {
								service_mall.goods_del({
									id:item.id,
								}).then(res=>{
									if(res.code==1){
										console.log(1111)
										this.getGuideList()
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								})
					        } else if (res.cancel) {
								
					        }
					    }
					});
				}
			},

			//点击加号
			_addNum(item) {
				if(!item.sku_id){
					uni.showToast({
						title:'当前规格已下架，请重新选择',
						icon:'none'
					})
					return
				}
				this.nowNum = item.cart_num
				this.nowNum++
				if(this.nowNum>item.num){
					uni.showToast({ title: '库存不足', icon: 'none' })
					return
				}
				service_mall.goods_getadd({
					// id:item.id,
					product_id:item.product_id,
					sku_id:item.sku_id,
					num:1
				}).then(res=>{
					if(res.code==1){
						this.getGuideList()
					}
				})
			},
			
			

			// 点击5d
			_toFiveD() {
				console.log('5d')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guideList {
		position: relative;
		margin-bottom: 162rpx;
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

		.gL_topNum {
			width: 100%;
			background-color: #fff;
			height: 58rpx;
			padding: 0rpx 36rpx;
			font: 500 24rpx/58rpx PingFang SC;
			color: #787878;
			display: flex;
			justify-content: space-between;

			span {
				color: #1A1C20;
				font-weight: 600;
			}

			.comeWhere {
				display: flex;
				align-items: center;

				image {
					width: 42rpx;
					height: 42rpx;
				}

				.comeWhereInfo {
					font: 500 24rpx/34rpx PingFang SC;
					color: #333;
					margin-left: 8rpx;

					span {
						color: #E9423E;
					}
				}
			}
		}

		// 店铺商品列表
		.gL_shopList {
			background-color: #fff;
			margin-top: 16rpx;

			.gL_shopRoom {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32rpx 0 36rpx;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);

				.gL_roomTit {
					width: 100%;
					font: 500 28rpx/40rpx PingFang SC;
					color: #1A1C20;
					display: flex;
					align-items: center;

					.gL_roomImg {
						width: 50rpx;
						height: 50rpx;
						background-color: #F6F7FB;
						border-radius: 50%;
						margin: 0 16rpx 0 40rpx;
						padding: 8rpx 8rpx;

						image {
							width: 34rpx;
							height: 34rpx;
						}
					}

					.gL_roomInfo {
						p {
							font: 400 22rpx/32rpx PingFang SC;
							color: #A0A0A0;
						}
					}

				}

				.gL_goRoomInfo {
					display: flex;
					align-items: center;

					.gL_goRoom {
						width: 122rpx;
						height: 44rpx;
						border: 2rpx solid #E7DEC8;
						border-radius: 22rpx;
						color: #CBAF87;
						text-align: center;
						font: 500 22rpx/42rpx PingFang SC;
					}

					.roomMap {
						view {
							font-size: 22rpx;
						}

						width: 76rpx;
						margin-left: 16rpx;
					}
				}
			}

			//商品详情列表 
			.gL_allShopList {
				padding-left: 36rpx;
				// height: calc(104rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
				// height: calc(104rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			

				.gL_border {
					width: 100%;
					height: 0;
					border-top: 2rpx solid #000;
					opacity: 0.08;
				}

				.gL_allShopItem {
					width: 100%;
					height: 252rpx;
					display: flex;
					flex-direction: column;
					padding: 24rpx 24rpx 0 0rpx;

					.gL_allItemTop {
						display: flex;
						align-items: center;

						.gL_shopImg {
							position: relative;
							margin: 0 16rpx 0 40rpx;

							image {
								width: 150rpx;
								height: 150rpx;
							}

							.gL_shop5D {
								.gL_5Dicon {
									font-size: 18rpx;
									height: 24rpx;
								}

								padding: 6rpx 0;
								width: 64rpx;
								height: 64rpx;
								border-radius: 50%;
								position: absolute;
								top: 0;
								bottom: 0;
								left: 0;
								right: 0;
								margin:auto;
								background-color: rgba(0, 0, 0, 0.2);
								border: 2rpx solid rgba(255, 255, 255, 0.2);
								color: #fff;
								display: flex;
								flex-direction: column;
								align-items: center;
								font: 400 18rpx/32rpx PingFang SC;
							}
						}

						.gL_shopInfo {
							display: flex;
							flex-direction: column;
							color: #1A1C20;
							font: 500 30rpx/40rpx PingFang SC;

							.gL_title {
								width: 448rpx;
								padding-right: 32rpx;
							}

							.gL_spec {
								display: flex;
								align-items: center;
								width: 350rpx;
								overflow: hidden;
								height: 44rpx;
								padding: 0 18rpx 0 14rpx;
								background-color: #F9F6F3;
								justify-content: space-between;
								color: #939393;
								margin: 18rpx 0 16rpx 0;

								view {
									font: 400 24rpx/44rpx PingFang SC;
								}
								.specList{
									width: 298rpx;
								}
							}

							.price {
								color: #EF5854;
								font-weight: bold;
							}
						}
					}

					.gL_allItemBottom {
						width: 100%;
						height: 42rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						font: 600 34rpx/42rpx PingFang SC;
						margin-left: auto;

						.gL_ShopNum {
							width: 72rpx;
							height: 42rpx;
							background-color: #F6F7FB;
							border-radius: 8rpx;
							text-align: center;
							// margin: 0 24rpx;
						}

						// span {
						// 	width: 72rpx;
						// 	text-align: center;
						// }
						.gL_minus, .gL_add {width: 72rpx;height: 42rpx;position: relative;}
						.gL_minus::before, .gL_add::before, .gL_add::after {content: "";width: 24rpx;height: 4rpx;border-radius: 4rpx;background: #333;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
						.gL_add::after {width: 4rpx;height: 24rpx;}
					}
				}
			}
		}
		// 规格弹框
		.gL_specShadow {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .8);
			z-index: 502;
		
			.gL_specInfo {
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				background-color: #fff;
				border-radius: 24rpx 24rpx 0 0;
				padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
				padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		
				.gL_specInfoTop {
					padding: 36rpx 32rpx 10rpx;
				}
		
				.spec_shop {
					display: flex;
					margin-bottom: 40rpx;
		
					image {
						width: 178rpx;
						height: 178rpx;
						box-shadow: 0rpx 2rpx 2rpx rgba(136, 136, 136, 0.16);
					}
		
					.spec_shopInfo {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 16rpx;
						padding-top: 32rpx;
						font: 400 22rpx/28rpx PingFang SC;
						color: #939393;
		
						span {
							color: #E9423E;
							font: 600 34rpx/44rpx PingFangSC-Semibold;
						}
					}
		
					.spec_close {
						width: 41rpx;
						height: 41rpx;
						background-color: #F9F6F3;
						border-radius: 50%;
						text-align: center;
						line-height: 41rpx;
						margin-left: auto;
					}
				}
		
				.spec_option {
					margin-bottom: 24rpx;
		
					.spec_title {
						font: 600 28rpx/40rpx PingFang SC;
						color: #1A1C20;
					}
		
					.spec_item {
						display: flex;
						align-items: center;
						margin-top: 24rpx;
						flex-wrap: wrap;
		
						span {
							padding: 4rpx 24rpx;
							font: 400 24rpx/34rpx PingFang SC;
							color: #939393;
							text-align: center;
							background-color: #F5F5F5;
							border-radius: 22rpx;
							margin: 0 16rpx 16rpx 0;
						}
		
						.specActive {
							background-color: #FEEFF2;
							color: #E9423E;
						}
					}
				}
		
				// 数量
				.spec_shopNum {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 4rpx;
		
					.shopNum_oper {
						display: flex;
						font: 600 34rpx/42rpx PingFang SC;
						align-items: center;
		
						span {
							width: 72rpx;
							height: 46rpx;
							text-align: center;
						}
		
						.shopNum {
							background-color: #F6F7FB;
							border-radius: 10rpx;
						}
					}
				}
		
				// 加入清单按钮
				.spec_joinBtn {
					width: 656rpx;
					height: 72rpx;
					background-color: #C3AB7C;
					border-radius: 8rpx;
					margin: 172rpx auto 0;
					text-align: center;
					font: 500 28rpx/72rpx PingFang SC;
					color: #fff;
				}
		
			}
		}

		
				// 数量
				.spec_shopNum {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 4rpx;

					.shopNum_oper {
						display: flex;
						font: 600 34rpx/42rpx PingFang SC;
						align-items: center;

						span {
							width: 72rpx;
							height: 46rpx;
							text-align: center;
						}

						.shopNum {
							background-color: #F6F7FB;
							border-radius: 10rpx;
						}
					}
				}

				// 加入清单按钮
				.spec_joinBtn {
					width: 656rpx;
					height: 72rpx;
					background-color: #C3AB7C;
					border-radius: 8rpx;
					margin: 172rpx auto 0;
					text-align: center;
					font: 500 28rpx/72rpx PingFang SC;
					color: #fff;
				}

			

		// 全选与优惠（未操作）
		.gL_allCheck {
			width: 100%;
			// height: 146rpx;
			position: fixed;
			bottom: 0rpx;
			height: calc(146rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			height: calc(146rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			background-color: #fff;

			.gL_allCheckBtn {
				width: 686rpx;
				height: 136rpx;
				border-radius: 8rpx;
				background-color: #1A1C20;
				margin: 0 auto;
				padding: 0 36rpx 0 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;

				.gL_allLeft {
					display: flex;
					align-items: center;

					checkbox {
						width: 46rpx;
					}

					label {
						font: 400 26rpx/36rpx PingFang SC;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text{margin-top: 10rpx;}
					}

					span {
						font: 400 34rpx/48rpx PingFang SC;
						margin-left: 24rpx;
					}
				}

				.gL_allRight {
					display: flex;
					align-items: center;
					border-radius: 8rpx;
					font: 400 28rpx/40rpx PingFang SC;
					// text-align: center;
					justify-content: center;
					view {
						margin: 0 6rpx 0 0rpx;
						font-size: 34rpx;
					}

					width: 168rpx;
					height: 70rpx;
					border:2rpx solid #FFFFFF;
					background-color: #CBAF87;

				}

				.gL_allRemove {
					justify-content: space-around;
				}
			}
			
		}
		
		//遮罩
		.mE_btnShadow{
			width: 100%;
			height: 100%;
			position: fixed;				
			z-index: 502;
			top: 0;
			left: 0;
			text-align: center;
			background-color: rgba(0,0,0,0.6);
			.mE_btnContent{
				width: 528rpx;
				height: 300rpx;
				background-color: #fff;
				border-radius: 8rpx;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 48rpx 40rpx;
				h2{font: 600 30rpx/40rpx PingFang SC; color:#292A2B;}
				h3{font: 500 28rpx/40rpx PingFang SC; color:#292A2B;}
				.mE_btn{
					width: 100%;
					// margin-top: 74rpx;
					display: flex;
					justify-content: space-between;
					view{
						width: 196rpx;
						height: 64rpx;
						border-radius: 32rpx;
						background-color: #F5F5F5;
						font: 400 26rpx/64rpx PingFang SC; 
						color:#0A0605;
					}
					.mE_btn2{
						background-color: #EBB964;
						color: #fff;
					}
				}
			}
		}
	}
	
</style>
